<!DOCTYPE html>
<html lang="zh-TW" class="transition-all duration-500">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>貓名 - 貓戰士起名器</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script> 
  <style>
    body {
      font-family: 'Microsoft JhengHei', sans-serif;
    }
    @keyframes gradient-x {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .animate-gradient-x {
      background: linear-gradient(270deg, #ec4899, #8b5cf6, #6366f1);
      background-size: 600% 600%;
      animation: gradient-x 15s ease infinite;
    }
  </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
  <!-- 背景光晕 -->
  <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
    <div class="absolute -top-1/4 -left-1/4 w-full h-full rounded-full bg-gradient-to-r from-pink-500/20 via-purple-500/20 to-blue-500/20 blur-3xl animate-pulse"></div>
  </div>

  <!-- 主体内容 -->
  <div class="container mx-auto px-4 py-10 relative z-10 max-w-md">
    <!-- 导航栏 -->
    <header class="mb-6">
      <nav class="bg-white/80 backdrop-blur-lg shadow-lg rounded-xl p-4 border border-gray-200 dark:border-gray-700 dark:bg-gray-800/80">
        <div class="flex justify-between items-center">
          <a href="#" class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-600 via-purple-600 to-indigo-600">貓名</a>
          <div class="flex space-x-3">
            <button onclick="toggleDarkMode()" class="p-2 rounded-full bg-gradient-to-r from-purple-100 to-indigo-100 dark:from-gray-700 dark:to-gray-600 hover:scale-110 transition-transform">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="23" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
              </svg>
            </button>
            <button onclick="toggleMobileMenu()" class="md:hidden text-gray-600 dark:text-gray-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
        <!-- 桌面菜单 -->
        <ul class="hidden md:flex space-x-6 mt-4">
          <li><a href="../zh-tw/" class="text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">返回首頁</a></li>
          <li class="relative group">
            <span class="cursor-pointer text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">語言</span>
            <ul class="absolute hidden group-hover:block bg-white shadow-lg rounded-lg py-2 w-40 mt-2 z-20 dark:bg-gray-800">
              <li><a href="../zh-cn/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（中国大陆）</a></li>
              <li><a href="../zh-tw/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（台灣）</a></li>
              <li><a href="../en/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">English</a></li>
            </ul>
          </li>
          <li><a href="https://gitlab.com/Qinshihuang233/warriors-name"  target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">項目地址</a></li>
          <li><a href="./about-cn/" class="text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">關於</a></li>
        </ul>
        <!-- 移动端下拉菜单 -->
        <ul id="mobile-menu" class="hidden mt-4 space-y-2 md:hidden bg-gray-50/80 backdrop-blur-sm rounded-xl p-4 shadow-inner dark:bg-gray-800/50">
          <li><a href="../zh-tw/" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">返回首頁</a></li>
          <li>
            <details class="group">
              <summary class="text-gray-700 hover:text-purple-600 cursor-pointer dark:text-gray-300 dark:hover:text-purple-400 flex justify-between items-center">
                <span>語言</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="group-open:rotate-180 transition-transform">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </summary>
              <ul class="ml-4 mt-2 space-y-1">
                <li><a href="../zh-cn/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（中国大陆）</a></li>
                <li><a href="../zh-tw/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（台灣）</a></li>
                <li><a href="../en/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">English</a></li>
              </ul>
            </details>
          </li>
          <li><a href="https://gitlab.com/Qinshihuang233/warriors-name"  target="_blank" rel="noopener noreferrer" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">項目地址</a></li>
          <li><a href="./about-cn/" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">關於</a></li>
        </ul>
      </nav>
    </header>

    <!-- 卡片区域 -->
    <main class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-6 dark:bg-gray-800/80 dark:border dark:border-gray-700">
      <h1 id="displayName" class="text-4xl font-extrabold text-center mb-6 bg-clip-text text-transparent animate-gradient-x">貓名</h1>
      <div class="text-center">
        <button onclick="generateName()" class="inline-block px-6 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-full hover:shadow-lg hover:scale-105 transform transition-all">生成名字</button>
      </div>
      <hr class="my-6 border-t border-gray-200 dark:border-gray-700" />
      <!-- 设置选项 -->
      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <label for="includeUnderage" class="text-gray-700 dark:text-gray-300">允許幼崽和學徒名</label>
          <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" id="includeUnderage" class="sr-only peer" onchange="changeIncludeUnderage()">
            <div class="w-11 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
          </label>
        </div>
        <div class="flex items-center justify-between">
          <label for="ignoreWeighting" class="text-gray-700 dark:text-gray-300">忽略詞綴比重</label>
          <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" id="ignoreWeighting" class="sr-only peer" onchange="changeIgnoreWeighting()">
            <div class="w-11 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
          </label>
        </div>
      </div>
    </main>

    <!-- 底部版权 -->
    <footer class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
      <p>© 2025 貓名 - 開源貓戰士起名器</p>
    </footer>
  </div>

  <!-- 数据加载脚本 -->
  <script async src="../data/zh-tw.js"></script>
  <!-- 页面逻辑脚本 -->
  <script>
    let prefixes = [];
    let suffixes = [];
    let totalApprentices = 0;
    let totalKits = 0;
    let unweightedPrefixes = [];
    let unweightedSuffixes = [];

    function changeIncludeUnderage() {
      document.getElementById("ignoreWeighting").disabled = !document.getElementById("includeUnderage").checked;
    }

    function changeIgnoreWeighting() {
      const ignore = document.getElementById("ignoreWeighting").checked;
      prefixes = ignore ? unweightedPrefixes : data.prefixes;
      suffixes = ignore ? unweightedSuffixes : data.suffixes;
    }

    function generateName() {
      const includeUnderage = document.getElementById("includeUnderage").checked;
      const ignoreWeighting = document.getElementById("ignoreWeighting").checked;

      const realPrefixes = ignoreWeighting ? unweightedPrefixes : data.prefixes;
      const realSuffixes = ignoreWeighting ? unweightedSuffixes : data.suffixes;

      let prefix = realPrefixes[Math.floor(Math.random() * realPrefixes.length)];
      let suffix;
      let kit = false;
      let randomIndex;

      if (includeUnderage) {
        randomIndex = Math.floor(Math.random() * (realSuffixes.length + data.apprentices + data.kits));
        if (randomIndex < realSuffixes.length) {
          suffix = realSuffixes[randomIndex];
        } else if (randomIndex < realSuffixes.length + data.apprentices) {
          suffix = "掌";
        } else {
          kit = true;
        }
      } else {
        suffix = realSuffixes[Math.floor(Math.random() * realSuffixes.length)];
      }

      const name = kit ? "小" + prefix : prefix + suffix;
      document.getElementById("displayName").textContent = name;
    }

    function toggleDarkMode() {
      const isDark = !document.documentElement.classList.contains('dark');
      document.documentElement.classList.toggle('dark', isDark);
      localStorage.setItem('darkMode', isDark);
    }

    function toggleMobileMenu() {
      const menu = document.getElementById("mobile-menu");
      menu.classList.toggle("hidden");
    }

    // 初始化加载
    document.addEventListener('DOMContentLoaded', () => {
      const savedDarkMode = localStorage.getItem('darkMode') === 'true';
      document.documentElement.classList.toggle('dark', savedDarkMode);

      // 监听数据加载完成
      const checkData = setInterval(() => {
        if (typeof data !== 'undefined') {
          clearInterval(checkData);
          init();
        }
      }, 100);
    });

    function init() {
      prefixes = data.prefixes;
      suffixes = data.suffixes;
      totalApprentices = data.apprentices;
      totalKits = data.kits;
      unweightedPrefixes = [...new Set(prefixes)];
      unweightedSuffixes = [...new Set(suffixes)];

      const includeUnderageCheckbox = document.getElementById("includeUnderage");
      const ignoreWeightingCheckbox = document.getElementById("ignoreWeighting");

      includeUnderageCheckbox.addEventListener('change', changeIncludeUnderage);
      ignoreWeightingCheckbox.addEventListener('change', changeIgnoreWeighting);
      generateName();
    }
  </script>
</body>
</html>